<template>
    <rx-dialog @handOk="onOk" @cancel="onCancel">
        <rx-layout>
            <div slot="center" class="solRelFunc">
                <div>
                    <a-button-group class="addbutton">
                        <button @click="addRow"><i class="iconfont iconadd"></i></button>
                        <button @click="removeRows"><i class="iconfont icontrash"></i></button>
                    </a-button-group>
                </div>
                <div>
                    <rx-grid ref="table"
                             :allowRowSelect="true"
                             :multiSelect="true"
                             :bordered="true"
                             :dataSource="dataSource"
                             :columns="columns"
                             rowKey="idx_"
                             :showPage="false">
                    <span slot="listField" slot-scope="{ text, record ,index}">
                        <a-select style="width: 100%" :options="listFields" v-model="record.listField" :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </span>
                        <span slot="relSolution" slot-scope="{ text, record ,index}">
                        <a-select style="width: 100%" :options="solutions" v-model="record.relSolution" @change="relSolutionChange($event,record)" :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </span>
                        <span slot="relField" slot-scope="{ text, record ,index}">
                        <a-select style="width: 100%" @focus="getCurFields(record)" :options="curFields" v-model="record.relField" @change="relFieldChange($event,record)" :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </span>
                    </rx-grid>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout, RxDialog, Util,BaseFormModel} from "@lowcode/jpaas-common-lib";
import FormSolutionApi from "@/api/form/core/formSolution";

export default {
    name: "solRelFunc",
    components: {
        RxLayout, RxDialog
    },
    mixins:[BaseFormModel],
    props: {
        rowData: Object,
        listFields: Array,
        solutions: Array,
        relFields: Array,
        layerid: String,
        destroy: Function
    },
    data() {
        return {
            columns: [
                {title: this.i18n('form.listField','列表字段'), dataIndex: "listField", width: '60%', scopedSlots: {customRender: 'listField'}},
                {title: this.i18n('form.formSolution','表单方案'), dataIndex: "relSolution", width: '60%', scopedSlots: {customRender: 'relSolution'}},
                {title: this.i18n('form.assoField','关联字段'), dataIndex: "relField", width: '60%', scopedSlots: {customRender: 'relField'}}
            ],
            dataSource:[],
            curFields:[],
        }
    },
    created() {
        if(this.relFields && this.relFields.length>0){
            this.dataSource=JSON.parse(JSON.stringify(this.relFields))
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBusinessSolution",key);
        },
        addRow() {
            this.dataSource.push({
                idx_: Util.randomId(),
                listField: "",
                relSolution: "",
                relField: "",
                isSingle:1
            });
        },
        removeRows() {
            var selectedRows = this.$refs.table.getSelectedRows();
            for (var i = 0; i < selectedRows.length; i++) {
                for (var j = 0; j < this.dataSource.length; j++) {
                    if (selectedRows[i].idx_ == this.dataSource[j].idx_) {
                        this.dataSource.splice(j, 1);
                    }
                }
            }
        },
        relSolutionChange(value, record) {
            record.relField="";
        },
        relFieldChange(value, record) {
            var filed=this.curFields.find(item => item.value === value);
            record.isSingle=filed.isSingle;
        },
        getCurFields( record) {
            this.curFields = [];
            if (record.relSolution) {
                FormSolutionApi.getListFields(record.relSolution).then(res => {
                    if (res.success) {
                        var ary = [{value: "ID_", label: "主键", fieldName: "ID_"}];
                        for (var i = 0; i < res.data.length; i++) {
                            var obj = res.data[i];
                            var newObj = {};
                            newObj.value = obj["name"];
                            newObj.label = obj["comment"];
                            newObj["fieldName"] = obj["fieldName"];
                            newObj["isSingle"] = obj["isSingle"];
                            ary.push(newObj);
                        }
                        this.curFields = ary;
                    }
                })
            }
        },
        onOk() {
            Util.closeWindow(this, 'ok',this.$refs.table.dataAction);
        },
        onCancel() {
            Util.closeWindow(this, 'cancel');
        }
    }
}
</script>

<style scoped>
.solRelFunc{
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex!important;
    flex-direction: column;
}
.solRelFunc >div:nth-child(2){
    flex: 1;
    margin-top: 10px;
}
</style>